<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="岗位编码">
      <el-input v-model="formInline.postCode" placeholder="岗位编码"></el-input>
    </el-form-item>
    <el-form-item label="岗位名称">
      <el-input v-model="formInline.postName" placeholder="岗位名称"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="异常" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-button @click="openadd">新增</el-button>
  <el-button @click="deleted">删除</el-button>
  <el-button @click="excel">excel</el-button>
  <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="postId"
        label="编号">
    </el-table-column>
    <el-table-column
        prop="postName"
        label="岗位名称">
    </el-table-column>
    <el-table-column
        prop="postCode"
        label="岗位编号">
    </el-table-column>
    <el-table-column
        prop="postSort"
        label="岗位排序">
    </el-table-column>
    <el-table-column
        label="状态">
      <template v-slot="scope">
        <el-tag v-if="scope.row.status==0">正常</el-tag>
        <el-tag v-if="scope.row.status==1">异常</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="添加时间">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="openupdate(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="del(scope.row.postId)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="修改岗位" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="岗位名称">
        <el-input v-model="form.postName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="岗位编码">
        <el-input v-model="form.postCode" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="岗位排序">
        <el-input-number v-model="form.postSort" controls-position="right" :min="1" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">异常</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注"  label-width="120px">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="新增岗位" :visible.sync="dialogFormVisibled">
    <el-form :model="formadd">
      <el-form-item label="岗位名称">
        <el-input v-model="formadd.postName"></el-input>
      </el-form-item>
      <el-form-item label="岗位编号">
        <el-input v-model="formadd.postCode"></el-input>
      </el-form-item>
      <el-form-item label="岗位排序">
        <el-input-number v-model="formadd.postSort" controls-position="right" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="formadd.status" label="0">正常</el-radio>
        <el-radio v-model="formadd.status" label="1">异常</el-radio>
      </el-form-item>
      <el-form-item label="备注"  label-width="120px">
        <el-input type="textarea" v-model="formadd.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibled = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>

  <el-pagination
      background
      :page-size="formInline.pageSize"
      :current-page="formInline.pageNum"
      @current-change="toPage"
      layout="prev, pager, next"
      :total="total">
  </el-pagination>

</div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      formInline:{
        pageSize:3,
        pageNum:1,
      },
      form:{},
      dialogFormVisible:false,
      ids:[],
      dialogFormVisibled:false,
      formadd:{},
      total:0,
    }
  },
  methods:{
    list(){
      this.axios.post("http://localhost:8090/wei/typeList",this.formInline).then(r=>{
        this.tableData=r.data.data.list;
        this.total=r.data.data.total;
      })
    },
    handleSelectionChange(val){
      this.ids=[]
      if (val.length>0 && val!=null){
        for (let i=0;i<val.length;i++){
          this.ids.push(val[i].postId)
        }
      }
      console.log(this.ids)
    },
    openupdate(SysPost){
      this.form=SysPost;
      this.dialogFormVisible=true;
    },
    update(){
      this.axios.post("http://localhost:8090/wei/update",this.form).then(()=>{
        this.dialogFormVisible=true;
        this.$message.success("修改成功")
      })
    },
    del(postId){
      this.axios.post("http://localhost:8090/wei/del?postId="+postId).then(()=>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    deleted(){
      this.axios.post("http://localhost:8090/wei/deleted?ids="+this.ids).then(()=>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    onSubmit(){
      this.list();
    },
    openadd(){
      this.dialogFormVisibled=true;
    },
    add(){
      this.axios.post("http://localhost:8090/wei/add",this.formadd).then(()=>{
        this.$message.success("新增成功");
        this.list();
      })
    },
    excel(){
      window.location.href="http://localhost:8090/wei/excel";
    },
    toPage(page){
      this.formInline.pageNum=page;
      this.list();
    }
  },
  created() {
    this.list();
  },
}
</script>

<style scoped>

</style>